<template>
  <div class="container">
    <canvas class="pag" id="pag"></canvas>
  </div>
</template>

<script>
  import { PAGInit } from 'libpag'

  export default {
    name: 'pag',
    data() {
      return {
        pagPath: '/avatar.pag',
        canvasId: 'pag'
      }
    },
    methods: {
      async playPAG() {
        const PAG = await PAGInit({
          locateFile: () => '/libpag.wasm'
        })
        const response = await fetch(this.pagPath)
        const buffer = await response.arrayBuffer()
        const pagFile = await PAG.PAGFile.load(buffer)
        const canvas = document.getElementById(this.canvasId)
        canvas.width = pagFile.width()
        canvas.height = pagFile.height()
        const pagView = await PAG.PAGView.init(pagFile, canvas)
        pagView.play()
      }
    },
    created() {
      this.playPAG()
    }
  }
</script>

<style scoped>
  .container {
    width: 400px;
    height: 400px;
    margin: auto;
  }
</style>